<style lang="scss">
	.col_info2{
        // text-align: right;
        text-align: left;
        padding-right: 20px;
        padding-bottom: 4px;
        padding-top: 4px;
    }
    .ivu-poptip-rel{
      width: 100%;
    }
</style>
<template>
	<Table :columns="getColumnsList" :data="dataList" border :span-method="handleSpan">
		<template slot-scope="{ row, index }" slot="clazz">
			<span>{{row.clazz.split(".").length > 1 ? row.clazz.split(".")[1]:row.clazz}}</span>
		</template>
		<template slot-scope="{ row, index }" slot="serviceName">
			<span>{{row.serviceName.split(".").length > 1 ? row.serviceName.split(".")[1]:row.serviceName}}</span>
			<Tooltip v-if="row.subName == null || row.subName == ''" :content="row.des === undefined || row.des === null || row.des === '' ? '暂无信息':row.des"
			 max-width="200" placement="right" :transfer="true" style="white-space: normal;">
				<Icon type="md-help-circle" />
			</Tooltip>
		</template>
		<template slot-scope="{ row, index }" slot="subName">
			<Checkbox v-if="isPartShrink==1 && editNumber" v-model="dataList[index].check" :disabled="isStep6" @on-change="checkData($event,index)">
			</Checkbox>
			<span>{{row.subName.split(".").length > 1 ? row.subName.split(".")[1]:row.subName}}</span>
			<Tooltip v-if="row.subName != null && row.subName != '' && row.des != null && row.des != ''" :content="row.des === undefined || row.des === null || row.des === '' ? '暂无信息':row.des"
			 max-width="200" placement="right" :transfer="true" style="white-space: normal;">
				<Icon type="md-help-circle" />
			</Tooltip>
		</template>
		<template slot-scope="{ row, index }" slot="options">
			<!-- 默认 -->
			<Poptip :transfer="true" word-wrap width="400" style="width: 100%;" :content="row.des != undefined && row.des != null && row.des != '' ? row.des:'暂无信息'">
				<Row v-if="row.resourcetype == 0" style="width: 100%;">
					<template v-if="Number(row.val) > 0">
						<Col span="12" class="col_info2">
							<span>*数量：</span>
							<span >{{row.val}}</span>
						</Col>
						<Col span="12" class="col_info2">
							<span>*单位：</span>
							<span>{{row.unit}}</span>
						</Col>
					</template>
					<template v-else>
						<Col span="24">
							<span >{{row.val}}</span>
						</Col>
					</template>
				</Row>
				<!-- 单选 -->
				<Row v-else-if="row.resourcetype == 1" style="width: 100%;">
					<Col span="24" class="col_info2" style="text-align: center;">
						<span>{{row.val}}</span>
					</Col>
				</Row>
				<!-- 文本框 -->
				<Row v-else-if="row.resourcetype == 3" style="width: 100%;">
					<template v-for="(item, key) in row.options">
						<Col span="24" :key="key">
							<span>*{{item}}：</span>
							<span>{{row.val}}</span>
						</Col>
					</template>
				</Row>
				<!-- 多选 -->
				<Row v-else-if="row.resourcetype == 4" style="width: 100%;">
					<Col span="24" style="text-align: center;">
						<span>{{row.val}}</span>
					</Col>
				</Row>
				<!-- 双副本 -->
				<Row v-if="row.resourcetype == 5" style="width: 100%;">
					<Col span="12" class="col_info2">
						<span>*双副本数量：</span>
						<span>{{row.val}}</span>
					</Col>
					<Col span="11" class="col_info2">
						<span>*单位：</span>
						<span>{{row.unit}}</span>
					</Col>
					<Col span="12" class="col_info2">
						<span>*单副本数量：{{row.val/2}}</span>
					</Col>
				</Row>
				<!-- 三副本 -->
				<Row v-if="row.resourcetype == 6" style="width: 100%;">
					<Col span="12" class="col_info2">
						<span>*三副本数量：</span>
						<span>{{row.val}}</span>
					</Col>
					<Col span="11" class="col_info2">
						<span>*单位：</span>
						<span>{{row.unit}}</span>
					</Col>
					<Col span="12" class="col_info2">
						<span>*单副本数量：{{parseFloat(row.val/3).toFixed(2)}}</span>
					</Col>
				</Row>
			</Poptip>
		</template>
		<template slot-scope="{ row, index }" slot="reason">
			<p v-if="ifedit || !isEditTool">{{row.purpose}}</p>
			<Input v-else @on-focus="setcheck(row)" v-model="dataList[index].purpose" type="textarea" :autosize="{minRows: 1,maxRows: 6}"
			 value="b.ncdes" :readonly="ifedit" />
		</template>
		<template slot-scope="{ row, index }" slot="quantity">
			<template v-if="(row.resourcetype != 1 && row.resourcetype != 3 && row.resourcetype != 4) && (Number(row.val)>0)">
				<span v-if="isStep6">{{row.shrinkVal}}</span>
				<span v-else-if="detail && ifShrink">{{row.shrinkVal}}</span>
				<InputNumber v-else :min="0" v-model="dataList[index].shrinkVal" @on-change="setShrinkCheck(index)" :max="Number(row.val)"/>
			</template>
			<span v-else>/</span>
		</template>
	</Table>
</template>
<script>
	export default {
		name: "tables",
		data() {
			return {
				sortData: [],
				g_span_record_obj: {
					"resource": {}
				},
				g_hash_record: {},
				columnsList: [
						// {
						//   title: " ",
						//   align: "center",
						//   width: 60,
						//   key: "check",
						//   slot: "check",
						//   fixed: 'left'
						// },
						{
							title: "资源类型",
							align: "center",
							width: 110,
							key: "clazz",
							slot: "clazz",
						},
						{
							title: "服务类型",
							align: "center",
							width: 110,
							key: "serviceName",
							slot: "serviceName",
						},
						{
							title: '服务名称    ',
							key: 'subName',
							align: 'left',
							minWidth: 160,
							slot: "subName"
						},
						{
							title: '测算依据',
							key: 'purpose',
							minWidth: 100,
							align: 'center',
							slot: "reason"
						},
						{
							title: "可选项/说明",
							align: "center",
							minWidth: 400,
							slot: "options"
						},
						{
							title: "缩容后的数量",
							align: "center",
							width: 100,
							//key: "quantity",
							slot: "quantity",
						},
				],
			}
		},
		created: function() {
			console.log("---dataList-->", this.dataList)
			if(this.dataList != null && this.dataList != undefined){
				if (this.dataList.length > 0 && this.columnsList.length > 0) {
					this.dataList = this.setSortData(this.dataList)
				}
			}
		},
		mounted: function() {
			console.log("---qqqqqq-->",this.columnsList)
		},
		methods: {
			handleSpan({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				var record = this.g_span_record_obj["resource"];
				var key = column["key"];
				//console.log("---key--",key)
				var match = ""
				if (key == "clazz") {
					match = row[key]
				} else if (key == "serviceName") {
					match = row["clazz"] + row["serviceName"]
				} else if (key = "subName") {
					match = row["clazz"] + row["serviceName"] + row["subName"]
				}
				if (this.objContain(record[key], match)) {

					if (record[key][match]["down"] == rowIndex) {

						var res = [record[key][match]["up"] - record[key][match]["down"] + 1, 1]
						//console.log(key, res)
						return res
					} else {
						//console.log(key, "00")
						return [0, 0];
					}
				} else {
					//console.log(key, "11")
					return [1, 1]
				}


			},
			setSortData(data) {
				console.log("22222222222")
				var t = JSON.stringify(data)
				var t2 = JSON.parse(t)
				var record = this.g_span_record_obj["resource"]
				record["clazz"] = {}
				record["serviceName"] = {}
				record["subName"] = {}
				var res = t2.sort((a, b) => {
					//console.log("---aaaa------",a["subName"],b["subName"]);
					// var v1 = a["clazz"].split(".")[0] + a["serviceName"].split(".")[0] + a["subName"].split(".")[0];

					// var v2 = b["clazz"].split(".")[0] + b["serviceName"].split(".")[0] + b["subName"].split(".")[0];

					if(a["subName"].indexOf(".") > -1){
						var v1 = a["clazz"].split(".")[0] + a["serviceName"].split(".")[0] + a["subName"].split(".")[0];
						var v2 = b["clazz"].split(".")[0] + b["serviceName"].split(".")[0] + b["subName"].split(".")[0];
					}else{
						var v1 = a["clazz"].split(".")[0] + a["serviceName"].split(".")[0] + a["subName"];
						var v2 = b["clazz"].split(".")[0] + b["serviceName"].split(".")[0] + b["subName"];
					}

					//console.log(",,,,,,,,,,,,,,,,,,,,,,,,,,",a,b)
					var clazz1 = this.getSortName(a["clazz"]);
					var clazz2 = this.getSortName(b["clazz"]);
					var serviceName1 = this.getSortName(a["serviceName"]);
					var serviceName2 = this.getSortName(b["serviceName"]);
					var subName1 = this.getSortName(a["subName"]);
					var subName2 = this.getSortName(b["subName"]);
					if (clazz1 == clazz2) {
						if (serviceName1 == serviceName2) {

							return subName1 - subName2;
						}
						return (serviceName1 - serviceName2);
					}
					return clazz1 - clazz2;

				})
				for (var i in res) {
					var d = res[i]
					this.setUpandDown(record["clazz"], d["clazz"], Number(i));
					this.setUpandDown(record["serviceName"], d["clazz"] + d["serviceName"], Number(i));
					this.setUpandDown(record["subName"], d["clazz"] + d["serviceName"] + d["subName"], Number(i));

				}
				console.log("===结束==");
				return res
			},

			getSortName(nameStr) {
				var baseNum = 10000;
				var sp = nameStr.split(".");
				var res = 0
				if (sp.length > 1) {
					res = Number(sp[0]);
				} else {
					if (this.objContain(this.g_hash_record, nameStr)) {
						res = this.g_hash_record[nameStr];
					} else {
						var rand = this.randomNum(1000, 2000);
						this.g_hash_record[nameStr] = rand;
						res = rand;
					}

				}
				// console.log(res,nameStr)
				return res;

			},

			setUpandDown(obj, key, inp) {
				if (!this.objContain(obj, key)) {
					obj[key] = {
						"up": inp,
						"down": inp
					}
				}
				if (obj[key]["up"] < inp) {
					obj[key]["up"] = inp
				}
				if (obj[key]["down"] > inp) {
					obj[key]["down"] = inp
				}
			},

			objContain(obj, key) {
				// console.log(obj,key)
				for (var k in obj) {
					if (key == k) {
						return true
					}
				}
				return false;
			},

			randomNum(minNum, maxNum) {
				switch (arguments.length) {
					case 1:
						return parseInt(Math.random() * minNum + 1, 10);
						break;
					case 2:
						return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
						//或者 Math.floor(Math.random()*( maxNum - minNum + 1 ) + minNum );
						break;
					default:
						return 0;
						break;
				}
			},

			setShrinkCheck(index) {
				if(this.ifShrink){
					this.$set(this.dataList[index], 'check', true);
				}
			},
			checkData(data,index){
				this.dataList[index].shrinkVal = 0;
			},
			shrinkValidate(){
				var isSubmit = true;
				console.log("111111111",this.dataList);

				if(this.dataList != undefined && this.dataList != null){
					this.dataList.some(item=>{
						if(item.check != undefined){
							console.log("111111111",item);
							if(item.check){
								if(item.shrinkVal == item.val){
									console.log("222222222222",item.shrinkVal,item.val);
									isSubmit = false;

									var str = "";
									if(item.subName.indexOf(".") > -1){
										str = item.subName.split(".")[1];
									}else{
										str = item.subName;
									}

									this.$Message.error({
										content: "[" + str + "]" + '缩容后数量不能等于原有数量!',
										duration: 3
									});
									return true;
								}
							}
						}
					})
				}

				return isSubmit;
			}
		},

		mounted: function() {},
		computed: {
			dataList: {
				get: function() {
					return this.value;
				},
				set: function(value) {
					console.log("修改--get----------》",value)
					this.$emit('input', value);
				}
			},
			getColumnsList(){
				console.log("-before----getColumnsList----------",this.columnsList);
				if(this.isPartShrink==0){
					this.columnsList.pop();
				}
				console.log("-----getColumnsList----------",this.columnsList);
				return this.columnsList;
			}
		},
		props: {
			handleInfo: {
				default: false
			},
			type: {
				default: "resource"
			},
			isEditTool: {
				default: true
			},
			value: {},
			ifedit: {
				default: false
			},
			editNumber: {
				default: false
			},
			ifShrink:{
                default: false
            },
            detail:{},
            isPartShrink:{},
            isStep6: {
                type: Boolean,
                default: false
            }
		},
		watch: {

		}
	}
</script>
